<template>
  <el-dialog
    title="学员报名"
    :visible.sync="dialogVisible"
    size="tiny" @close="handleCancel()">
    <div class="sign_class_time">
      <el-row>
        <el-col :span="6" class="set_l">
          姓名：
        </el-col>
        <el-col :span="18">
          {{studentInfo.name}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="set_l">
          监护人手机：
        </el-col>
        <el-col :span="18">
          {{studentInfo.parentMobile}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="set_l">
          报名课程：
        </el-col>
        <el-col :span="18">
          {{classData.trainCourseName}}
        </el-col>
      </el-row>
      <el-form :model="form" ref="form" label-width="90px" style="margin-top:8px;">
        <el-form-item label="校区：" prop="campus" required :rules="[{ required: true, message: '请选择校区'}]">
          <el-select v-model="form.campus" value-key="key" placeholder="请选择校区" style="width: 85%;">
            <el-option v-for="item in train_scholl_type_list" :key="item.key" :label="item.value" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班别：" prop="type" required :rules="[{ required: true, message: '请选择班别'}]">
          <el-select v-model="form.type" value-key="key" placeholder="请选择班别" style="width:85%;" @change="handleGetType()" >
            <el-option v-for="item in train_class_type_list" :key="item.key" :label="item.value" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="次课类型：" prop="classType" required :rules="[{ required: true, message: '请选择次课类型'}]">
          <el-select v-model="form.classType" placeholder="请选择次课类型" style="width:85%;">
            <el-option v-for="item in train_ck_course_list" :key="item.key" :label="item.timesCourseText" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期：" prop="time" style="margin-bottom:0;">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            style="width:85%;"
            clearable
            placeholder="请选择有效期">
          </el-date-picker>
          <p class="time_tips">(不设置或清除有效期即为不限期)</p>
        </el-form-item>
        <el-form-item label="报名费：" prop="signupFee" required>
          <e-input-money v-model="form.signupFee" :max="99999900" placeholder="请填写报名费" style="width:85%;"/>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel()">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import EInputMoney from '@e-ui/InputMoney'
export default {
  components: {
    EInputMoney
  },
  props: {
    studentInfo: {
      type: Object,
      default: {}
    },
    classData: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ...mapGetters({
      train_scholl_type_list: 'train_scholl_type_list',
      train_class_type_list: 'train_class_type_list',
      train_ck_course_list: 'train_ck_course_list'
    })
  },
  created () {
    this.$store.dispatch('train_scholl_type_list', {courseId: this.$route.query.crruid})
    this.$store.dispatch('train_class_type_list', {courseId: this.$route.query.crruid})
  },
  data () {
    return {
      dialogVisible: true,
      schoolList: [],
      form: {
        campus: '',
        type: '',
        classType: '',
        time: '',
        signupFee: ''
      }
    }
  },
  methods: {
    handleGetType () { // 获取次课类型
      this.$store.dispatch('train_ck_course_list', {courseId: this.$route.query.crruid, classLevelId: this.form.type.key})
    },
    handleCancel () {
      this.$emit('input', false)
    },
    handleSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('input', false)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.sign_class_time{
  padding:0 15px;
  .set_l{
    text-align: right;
  }
  .el-col{
    line-height:40px;
    margin:0;
  }
  .set_tips{
    font-size: 12px;
    color:#999;
    line-height: 30px;
    padding-left: 80px;
  }
  .time_tips{
    font-size: 12px;
    color:#999;
  }
  .el-form-item__label{
    padding:0;
    line-height: 40px;
  }
}
</style>
